<template>
  <div class="detail-tabs">
    <mt-navbar v-model="selected" class="de-mt-nb" >
      <mt-tab-item id="tab-container1">图文详情</mt-tab-item>
      <mt-tab-item id="tab-container2">参数</mt-tab-item>
    </mt-navbar>
    <mt-tab-container
      v-model="selected"
      class="de-mt-con"
      v-for="(list , index) of deData"
      :key='index' swipeable>
      <mt-tab-container-item id="tab-container1">
        <!-- 注意数据的多层嵌套 -->
        <div class="goodDetailImg">
            <p v-for="(lists, index) of list.Images" :key='index'>
              <img :src="lists.one" alt="详情图片">
            </p>
        </div>
      </mt-tab-container-item>

      <mt-tab-container-item id="tab-container2" class="tab-right">
        <div class="peizhi" v-html="list.homePeizhi">
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
import { Toast,MessageBox,Navbar,TabItem,TabContainer,TabContainerItem } from "mint-ui"
export default {
  props: {
    deData: Array
  },
  data() {
    return {
      selected: 'tab-container1'
    }
  },
  // mounted() {
  //   console.log(this.deData)
  // },
}
</script>

<style lang="less">
  .detail-tabs{
    width: 100%;
    background: white;
    .de-mt-nb{
      width: 100%;
      margin-bottom: .06rem;
      .mint-tab-item{
        color: black;
        .mint-tab-item-label{
          font-size: .4rem;
          font-weight: 600;
        }
      }
      .mint-tab-item.is-selected{
        color: #50a6d1;
        border-bottom: 3px solid #50a6d1;
        .mint-tab-item-label{
          font-size: .4rem;
        }
      }
    }
    .de-mt-con{
      width: 100%;
      margin-bottom: .8rem;
      .goodDetailImg{
        width: 100%;
        img{
          width: 100%;
        }
      }
      .peizhi{
        width: 100%;
        h3{
          height: .8rem;
          line-height: .8rem;
          font-size: .36rem;
          color: #3e97d8;
          margin-left: .2rem;
        }
        span{
          height: .6rem;
          line-height: .6rem;
          font-size: .3rem;
          color: rgb(68, 68, 68);
          margin-left: .2rem;
        }
        p{
          line-height: .4rem;
          font-size: .28rem;
          margin-left: .2rem;
          color: #797979;
        }
      }
      .tab-right{
        margin-bottom: .36rem;
      }
    }
  }
</style>
